import React, { Component } from 'react';
import "../styles/List.scss";

import pic01 from '../assets/pic01.gif'
import pic02 from '../assets/pic02.gif'
import pic03 from '../assets/pic03.gif'
import pic04 from '../assets/pic04.gif'
import pic05 from '../assets/pic05.gif'
import pic06 from '../assets/pic06.gif'
import pic07 from '../assets/pic07.gif'
import pic08 from '../assets/pic08.gif'
import pic09 from '../assets/pic09.gif'
import pic10 from '../assets/pic10.gif'


class List extends Component {
    // 定义组件状态
    constructor(props) {
        super(props)
        this.state = {
            goodslist: [
                { pic: pic01, text: '护肤' }, { pic: pic02, text: '彩妆' }, { pic: pic03, text: '香氛' }, { pic: pic04, text: '进口酒' }, { pic: pic05, text: '国产酒' }, { pic: pic06, text: '精品奢货' }, { pic: pic07, text: '食品百货' }, { pic: pic08, text: '母婴专区' }, { pic: pic09, text: '直播专区' }, { pic: pic10, text: '特卖专场' },
            ]
        }
    }
    render() {
        return (
            <div className='list'>
                {
                    this.state.goodslist.map((item, index) => {
                        return (
                            <div className='item' key={index}>
                                <img src={item.pic} alt="" />
                                <div className='text'>{item.text}</div>
                            </div>
                        )
                    })
                }
            </div>
        );
    }
}

export default List;